<!DOCTYPE html>
<html>
  <head>
    <title>❁</title>
    <style>
      div, body {
	  margin: 0;
	  padding: 0;
      }

      img {
	  user-select: none;
      }

      html {
	  width: 100vw;
	  height: 100vh;
	  overflow: hidden;
      }

      #picture {
	  --unit: calc(100vh / 90);
	  overflow: hidden;
	  height: calc(90 * var(--unit));
      }

      #picture h1 {
	  font-size: var(--unit);
      }

      #picture>*, .smile, .eyes, .center {
	  margin-left: auto;
	  margin-right: auto;
      }

      .flower {
	  position: relative;
	  top: calc(-75 * var(--unit));
	  width: calc(30 * var(--unit));
	  height: calc(30 * var(--unit));
      }

      .flower>* {
	  position: relative;
	  width: 0;
	  height: 0;
      }

      .center {
	  top: calc(15 * var(--unit));

	  animation-name: center-appear;
	  animation-duration: 0.4s;
	  animation-fill-mode: both;
      }

      .center::before {
	  content: "";
	  display: block;
	  width: calc(3 * var(--unit));
	  height: calc(3 * var(--unit));
	  background-color: orange;
	  border-radius: calc(1.5 * var(--unit));
	  position: relative;
	  top: calc(-1.5 * var(--unit));
	  left: calc(-1.5 * var(--unit));
      }

      @keyframes center-appear {
	  0% {
	      transform: scale(0);
	  }

	  100% {
	      transform: scale(1);
	  }
      }

      .petal {
	  top: calc(14.7 * var(--unit));
	  left: calc(15 * var(--unit));
      }

      .petal * {
	  width: calc(var(--subunit) * var(--unit));
	  animation-duration: 10s;
	  animation-timing-function: ease-out;
	  animation-fill-mode: both;
      }

      .petal>*{
	  position: relative;
	  top: calc(-3 * var(--subunit) * var(--unit));
	  left: calc(-0.5 * var(--subunit) * var(--unit));

	  transform-origin: 50% 100%;
	  animation-name: petal-rotate;
      }

      .petal>*>*{
	  position: relative;

	  animation-delay: inherit;
	  animation-name: petal-come-close;
      }

      @keyframes petal-rotate {
	  0% {
	      transform: rotate(0deg);
	  }

	  100% {
	      transform: rotate(var(--end-deg));
	  }
      }

      @keyframes petal-come-close {
	  0% {
	      bottom: calc(15 * var(--unit));
	  }

	  100% {
	      bottom: 0;
	  }
      }

      .smile {
	  top: calc(20 * var(--unit));
      }

      .eyes {
	  top: calc(5 * var(--unit));
      }

      .smile>*, .eyes>* {
	  position: relative;
	  width: calc(17 * var(--unit));
	  left: calc(-8.5 * var(--unit));
	  top: calc(-3 * var(--unit));
	  animation-fill-mode: both;
      }

      .smile>* {
	  animation-name: appear;
	  animation-duration: 0.3s;
      }

      @keyframes appear {
	  0% {
	      transform: scaleY(0);
	  }

	  100% {
	      transform: scaleY(1);
	  }
      }

      .eyes>* {
	  transform-origin: 50% calc(10.5 * var(--unit));
	  animation-name: eyes-blink;
	  animation-duration: 4s;
	  animation-iteration-count: infinite;
      }

      @keyframes eyes-blink {
	  0%, 100% {
	      transform: scaleY(0);
	  }

	  7.5%, 92.5% {
	      transform: scaleY(1);
	  }
      }

      .stem {
 	  position: relative;
	  top: calc(15 * var(--unit));
	  background-color: #495;
	  border-left: solid calc(0.5 * var(--unit)) #252;
	  border-right: solid calc(0.5 * var(--unit)) #252;
	  width: var(--unit);
	  height: calc(75 * var(--unit));

	  transform-origin: 50% calc(0 * var(--unit));
	  animation-name: appear;
	  animation-duration: 0.6s;
	  animation-fill-mode: both;
      }

      .wesolych, .wszystkich {
	  position: relative;
	  width: 0;
	  height: 0;
	  top: calc(-55 * var(--unit));

	  animation-name: appear;
	  animation-duration: 0.4s;
	  animation-fill-mode: both;
      }

      .wszystkich {
	  top: calc(-35 * var(--unit));
      }

      .wesolych>*, .wszystkich>* {
	  position: relative;
	  width: calc(42 * var(--unit));
	  left: calc(-21 * var(--unit));

	  transform-origin: 50% 100%;
	  animation-name: bounce;
	  animation-direction: alternate;
	  animation-iteration-count: infinite;
	  animation-duration: 1.5s;
	  animation-fill-mode: both;
	  animation-timing-function: cubic-bezier(0.01, 0.29, 0, 0.96);
      }

      @keyframes bounce {
	  0% {
	      transform: scaleY(0.7);
	  }

	  100% {
	      transform: scaleY(1.2);
	  }
      }
    </style>
  </head>
  <body>
    <div id="picture">
      <div class="stem" style="animation-delay: 27.15s;"></div>
      <div class="flower">
      <div class="center" style="animation-delay: 14.8s;"></div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -360deg; animation-delay: 17.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -384deg; animation-delay: 16.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -408deg; animation-delay: 16.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -432deg; animation-delay: 16.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -456deg; animation-delay: 16.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -480deg; animation-delay: 16.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -504deg; animation-delay: 15.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -528deg; animation-delay: 15.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -552deg; animation-delay: 15.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -576deg; animation-delay: 15.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -600deg; animation-delay: 15.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -624deg; animation-delay: 14.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -648deg; animation-delay: 14.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -672deg; animation-delay: 14.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 4.9; --end-deg: -696deg; animation-delay: 14.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -732deg; animation-delay: 14.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -756deg; animation-delay: 13.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -780deg; animation-delay: 13.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -804deg; animation-delay: 13.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -828deg; animation-delay: 13.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -852deg; animation-delay: 13.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -876deg; animation-delay: 12.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -900deg; animation-delay: 12.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -924deg; animation-delay: 12.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -948deg; animation-delay: 12.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -972deg; animation-delay: 12.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -996deg; animation-delay: 11.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -1020deg; animation-delay: 11.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -1044deg; animation-delay: 11.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 3.5; --end-deg: -1068deg; animation-delay: 11.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1104deg; animation-delay: 11.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1128deg; animation-delay: 10.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1152deg; animation-delay: 10.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1176deg; animation-delay: 10.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1200deg; animation-delay: 10.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1224deg; animation-delay: 10.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1248deg; animation-delay: 9.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1272deg; animation-delay: 9.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1296deg; animation-delay: 9.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1320deg; animation-delay: 9.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1344deg; animation-delay: 9.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1368deg; animation-delay: 8.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1392deg; animation-delay: 8.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1416deg; animation-delay: 8.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 2.5; --end-deg: -1440deg; animation-delay: 8.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1476deg; animation-delay: 8.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1500deg; animation-delay: 7.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1524deg; animation-delay: 7.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1548deg; animation-delay: 7.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1572deg; animation-delay: 7.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1596deg; animation-delay: 7.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1620deg; animation-delay: 6.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1644deg; animation-delay: 6.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1668deg; animation-delay: 6.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1692deg; animation-delay: 6.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1716deg; animation-delay: 6.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1740deg; animation-delay: 5.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1764deg; animation-delay: 5.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1788deg; animation-delay: 5.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1.5; --end-deg: -1812deg; animation-delay: 5.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -1848deg; animation-delay: 5.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -1872deg; animation-delay: 4.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -1896deg; animation-delay: 4.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -1920deg; animation-delay: 4.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -1944deg; animation-delay: 4.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -1968deg; animation-delay: 4.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -1992deg; animation-delay: 3.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -2016deg; animation-delay: 3.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -2040deg; animation-delay: 3.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -2064deg; animation-delay: 3.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -2088deg; animation-delay: 3.0s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -2112deg; animation-delay: 2.8s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -2136deg; animation-delay: 2.6s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -2160deg; animation-delay: 2.4s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="petal">
	<div style="--subunit: 1; --end-deg: -2184deg; animation-delay: 2.2s;">
	  <img src="./petal.svg" alt="flower petal" draggable="false">
	</div>
      </div>
      <div class="smile">
	<img style="animation-delay: 26.65s;" src="./smile.svg" alt="flower smile" draggable="false">
      </div>
      <div class="eyes">
	<img style="animation-delay: 26.65s;" src="./eyes.svg" alt="flower eyes" draggable="false">
      </div>
      </div>
      <div class="wesolych" style="animation-delay: 28.25s;">
        <img src="wesolych.svg" alt="&quot;Wesołych Świąt&quot; text" draggabe="false"></img>
      </div>
      <div class="wszystkich" style="animation-delay: 28.25s;">
        <img src="wszystkich.svg" alt="&quot;Wszystkich Świętych&quot; text" draggable="false"></img>
      </div>
    </div>
  </body>
</html>
